<template>
	<view class="main">
		<view class="face-analysis-upload">

			<!-- 顶部导航 -->
			<view class="nav-bar">
				<view class="back-icon" @tap="goBack">
					<text class="iconfont icon-back"></text>
				</view>
			</view>

			<!-- 图片展示区 -->
			<view class="photo-preview">
				<image v-if="imageSrc" :src="imageSrc" mode="aspectFill"></image>
				<view v-else class="placeholder">
					<text class="placeholder-text">请上传你的照片</text>
				</view>
			</view>

			<!-- 底部功能区 -->
			<view class="bottom-area">
				<view class="capture-btn" @tap="uploadPhoto"></view>
			</view>

		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import sheep from '@/sheep';

const imageSrc = ref('');

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 上传照片
const uploadPhoto = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			imageSrc.value = res.tempFilePaths[0];
			// 后续操作，比如上传服务器，或跳转结果页
			sheep.$helper.toast('照片上传成功');
			// 延迟5秒
			setTimeout(() => {
				// 跳转到结果页
				sheep.$router.go('/pages/index/faceAnalysisResult');
			}, 2000);

		}
	});
};
</script>

<style scoped lang="scss">
.main {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(to bottom, #ffdae6, #f4d8ff, #fff3ca);
}

.face-analysis-upload {
	width: 100%;
	height: 90vh;
	display: flex;
	flex-direction: column;
}

.nav-bar {
	height: 100rpx;
	padding-top: var(--status-bar-height);
	display: flex;
	align-items: center;
	padding-left: 30rpx;
}

.back-icon {
	font-size: 44rpx;
	color: #333;
}

.photo-preview {
	flex: 1;
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 40rpx 100rpx;

	image {
		width: 100%;
		height: 100%;
	}

	.placeholder {
		font-size: 30rpx;
		color: #999;
	}
}

.bottom-area {
	height: 220rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.capture-btn {
	width: 120rpx;
	height: 120rpx;
	background-color: #FF6B5F;
	border-radius: 50%;
	border: 8rpx solid #fff;
	box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.1);
}
</style>
